<!--
  数据列表
-->
<template>
  <div>
    <!-- <div class="mid-data-header" style="color:#000;font-weight:bold">{{this.row.RINM}} {{this.row.STNM}}</div> -->
    <div style="background: rgba(0, 0, 0,0); padding: 10px 20px;">
      <!--这里是表格-->

      <el-table :stripe='this.stripe' height="150px" class="tre" :data="tableData" style="color:#000;overflow: auto;min-height:400px" :row-style="{'background-color':'rgba(255,255,255,0)'}" :header-row-style="{'background-color':'rgba(255,255,255,0)'}" :header-cell-style="{'background-color':'rgba(255,255,255,0)'}" size="medium" row-key="properties">
        <el-table-column fixed v-for="col in tableFormat" :key="col['prop']" :width="col['width']" :prop="col['prop']" :label="col['label']" :formatter="col['formatter']" :show-overflow-tooltip="true">
          <template slot-scope="scope">
            <!-- 动态组件 -->
            <component :is="formatter(scope.row,scope.column,scope.row[col['prop']],scope.$index,col['formatter'])" :row="scope.row" :column="scope.column" :cellValue="scope.row[col['prop']]" :index="scope.$index" />
          </template>
        </el-table-column>
      </el-table>
      <!--这里是分页-->
      <!-- <div class="block">
        <el-pagination
          :current-page.sync="currentPage"
          :page-size="pageSize"
          layout="total, prev, next, jumper, slot"
          :total="total">
          <el-button type="button" @click="getData()" :loading="loading" icon="el-icon-refresh"></el-button>
        </el-pagination>
      </div> -->
    </div>
  </div>

</template>

<style scoped>
.tre>>>.el-table__row:hover{
  background: #fdf5e6!important;
}
.tre>>>.el-table__row--striped{
  background: #f3f9ff!important;
}
.tre {
  max-height: 450px;
  overflow: auto;
}
</style>
<style>
.el-pagination .btn-prev {
  color: #fff;
}
.el-pagination .btn-next {
  color: #fff;
}
.el-pagination span:not([class*="suffix"]),
.el-pagination button {
  color: #fff;
}
::-webkit-scrollbar {
  /* width: 10px;
  height: 10px;
  background-color: rgba(255, 255, 255, 0.1); */
  /* border-radius: 10px; */
}
::-webkit-scrollbar-corner {
  background-color: transparent;
}
::-webkit-scrollbar-thumb {
  width: 8px;
  height: 8px;
  background-color: #a8a8a8;/*rgba(255, 255, 255, 0.2);*/
  border-radius: 10px;
  /*表格样式的调整*/
}
</style>

<script>
import 'whatwg-fetch'
// import Vue from 'vue'

export default {
  data () {
    return {
      stripe: true,
      total: 0,
      pageSize: 24,
      currentPage: 1,
      // 表格中数据
      tableData: [],
      loading: true,
      tableFormat: []
    }
  },
  mounted: function () {
    this.tableFormat = this.addition['tableFormat']
    // 初始化数据
    this.getData()
    console.log(this.tableFormat)
  },
  watch: {
    row () {
      this.getData()
    },
    'currentPage': function () {
      this.getData()
    }
  },
  methods: {
    // 用户自定义格式化函数检查
    formatter (row, column, cellValue, index, colformatter) {
      // 存在的场合执行用户定义的函数
      if (colformatter) {
        let result = colformatter(row, column, cellValue, index)
        // 是对象（组件）
        if (typeof result === 'object') {
          // 直接返回组件
          return result
        }
        // 组装渲染
        return {
          // 模版
          template: `<span>${result}</span>`
        }
      } else {
        // 返回默认组件构造器
        return {
          // 模版
          template: '<span>{{cellValue}}</span>',
          // 参数
          props: ['cellValue']
        }
      }
    },
    getQueryParam (otherParams) {
      let querySrc = 'page=' + this.currentPage + '&pageSize=' + this.pageSize
      if (this.searchInput !== '') {
        this.tableFormat.forEach(e => {
          if (e.isSearch) {
            querySrc += '&' + e['prop'] + '=' + this.searchInput
          }
        })
      }
      for (var key in otherParams) {
        querySrc += '&' + key + '=' + otherParams[key]
      }
      return querySrc
    },
    getData: function () {
      console.log(this.row)
      let _this = this
      this.loading = true
      // 处理参数
      const { url, param } = this.$handleSrc(this.src, { row: this.row })
      this.$postJSON(url, this.getQueryParam(param))
        .then(respon => {
          // console.log(respon.data, '实时数据')
          _this.tableData = respon.data.result
          // _this.$set(this,'tableData',respon.data.result)
          _this.total = respon.data.total_count
          // console.log(_this.total, '总页')
          _this.loading = false
        }).catch(e => {
          _this.loading = false
        })
    }
  },
  // 组建接受的传入参数
  props: [
    // 附加
    'addition',
    // 来源地址
    'src',
    'row'
  ]
}
</script>
